<template>
	<view>
<u-sticky>
		    <view class="navtop">
		        <view class="status_bar">
		            <!-- 这里是状态栏 -->
		        </view>
		        <view class="navtitle ">
					购物车
					<view class="icon" @click="fanhui()">
					    <u-icon name="arrow-left" color="#fff" size="20"></u-icon>
					</view>
					<view class="w-90 y-flex y-justify-end top-1" @click="isEdit = !isEdit">
						<span v-if="!isEdit" >编辑</span>
						<span v-else>取消</span>
					</view>


		        </view>

		    </view>
		</u-sticky>
		<!-- zhongjain -->
		<view class="box"></view>
		<view class="main">
			<!-- 最外层 -->
			<!-- <view class="store-list y-p-30" style="border: 1rpx solid red;"></view> -->
<scroll-view class="scroll-view_H" :scroll-y="true" style="width: 100%; height: 1200rpx;" @scrolltolower="scrolltolower" >
			<view class="section flex-row" v-for="(storeItem, storeIndex) in shoppingCart" :key="storeIndex">

					<!-- 商品分店铺，点击按钮全选当前商铺的所有产品 -->
					<!-- <view @click="storeSelBtn(storeIndex)" class="store-header y-flex y-align-center">
						<view class="sel-btn y-p-t-5">
							<u-icon v-if="(storeItem.isBuySelect && !isEdit) || (storeItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
							<view v-else class="no-select"></view>
						</view>
						<span class="y-font-size-30 y-m-l-13 y-m-r-10">{{storeItem.storeName}}</span>
						<u-icon name="arrow-right"></u-icon>
					</view> -->

					<!-- 删除店铺的盒子 -->
					<!-- <view class="" style="border:  1rpx solid;"></view> -->

						<view class="section_1 flex-row" v-for="(goodsItem, goodsIndex) in storeItem.goodsList" :key="goodsIndex">
							<view @click="goodsSelBtn(storeIndex, goodsIndex)" class="box-1">
								<view class="sel-btn">
									<u-icon v-if="(goodsItem.isBuySelect && !isEdit) || (goodsItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
									<view v-else class="no-select"></view>
								</view>
							</view>
							<view class="box-2">
								<u-image :src="goodsItem.image" radius="10rpx" width="250rpx" height="260rpx" @click="tiaozhuan(goodsItem)"></u-image>
							</view>
							<view class="box-3">
								<view class="y-flex-1">
									<view class="box-31"> {{goodsItem.storeName}} </view>
									<view class="box-32"   >
										{{goodsItem.storeInfo}}
									</view>
								</view>
								<view class="goods-price y-flex y-align-end y-flex-1 flex-row">
									<view class="box-33"> ￥{{goodsItem.price}} </view>
									<view class="box-34" style="z-index: 0;">
										<u-number-box size="18" v-model="goodsItem.cartNum" @change="countChange(goodsItem.id, $event)"></u-number-box>
									</view>
								</view>
							</view>

						</view>

				</view>
</scroll-view>
			<view style="height: 200rpx;"></view>
		</view>
		<!-- 底部 -->
		<view class="bottom flex-row">
			<view class="group-1 flex-row">
				<view @click="allSelBtn()" class="flex-row">
					<view class="group-11">
						<u-icon v-if="allSelState" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
						<view v-else class="no-select"></view>
					</view>
					<text class="text-1">全选</text>
				</view>
			</view>
			<view class="group-2 flex-row">
				<view v-if="!isEdit" class="group-21"> 总计: <text class="text-2">￥{{totalPrice}} </text> </view>
				<view class="group-22">
					<u-button v-if="!isEdit" shape="circle" :hairline="false" :customStyle="submitBtnStyle" type="primary" @click="jiesuan()"> 结算( {{totalSelCount}} ) </u-button>
					<u-button v-else shape="circle" :hairline="false" :customStyle="submitBtnStyle" @click="shanchu()"> 删除( {{totalSelCount}} ) </u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {cartList, cartRemove, editCartCount} from "../../api";
  import index from "../index";

  export default {
		data() {
			return {
        pageInfo: {
          pageNum: 1,
          pageSize: 10
        },

				isEdit: false, //是否编辑（购物/编辑）
				shoppingCart: [],//购物车数据
				submitBtnStyle: {
					background: 'linear-gradient(to right, #6CBEFF, #1989E1, #1989E1)',
					color: '#ffffff',
					border: 'none'
				}//结算、删除按钮的样式
			}
		},
		computed:{
			//是否已经全部选中
			allSelState(){
				let buyAllSelect = true // 购物全选
				let delAllSelect = true // 编辑全选
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(!gitem.isBuySelect) buyAllSelect = false;
						if(!gitem.isDelSelect) delAllSelect = false;
					})
				})
				if(!this.isEdit) return buyAllSelect;
				else return delAllSelect;
			},
			//总价格
			totalPrice(){
				let totalPrice = 0
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(gitem.isBuySelect){
							totalPrice = totalPrice*1 + gitem.price*gitem.cartNum
						}
					})
				})
				return totalPrice
			},
			//当前操作下选中的数量
			totalSelCount(){
				let buyCount = 0 // 购物全选
				let delCount = 0 // 编辑全选
				this.shoppingCart.forEach(sitem=>{
					sitem.goodsList.forEach(gitem=>{
						if(gitem.isBuySelect){
							buyCount = buyCount*1 + gitem.cartNum
						}
						if(gitem.isDelSelect){
							delCount = delCount*1 + 1
						}
					})
				})
				if(!this.isEdit){
					return buyCount
				} else{
					return delCount
				}
			}
		},
		created() {
			this.getData()
		},
		methods: {
			scrolltolower(){
				console.log(123123121231)

				this.pageInfo.pageNum++;
				this.getData();
			},
			 tiaozhuan(item){
        console.log('item', item)
         uni.navigateTo({
           url:'../../subPackages/pages/shoppingmall/productDetails/productDetails?id='+item.productId
         })
			 },
			fanhui(){
				this.$emit('returns')
				uni.navigateBack({

				})
			},
			//请求数据。。。
			getData(){
        cartList(this.pageInfo).then(res => {
          for(let i = 0; i < res.rows.length; i++){
            let goodsList = []
            goodsList.push(res.rows[i])
            this.shoppingCart.push({
              id: i + i + '',
              isDelSelect: false,
              isBuySelect: false,
              goodsList: goodsList
            })
          }
        })
			},
			//商家的选中与否
			storeSelBtn(storeIndex){
				if(!this.isEdit){ //购物
					this.shoppingCart[storeIndex].isBuySelect = !this.shoppingCart[storeIndex].isBuySelect
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						item.isBuySelect = this.shoppingCart[storeIndex].isBuySelect
					})
				}else{//编辑

					this.shoppingCart[storeIndex].isDelSelect = !this.shoppingCart[storeIndex].isDelSelect
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						item.isDelSelect = this.shoppingCart[storeIndex].isDelSelect
					})
				}
			},
			//商品的选中与否
			goodsSelBtn(storeIndex, goodsIndex){
				if(!this.isEdit){ //购物
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isBuySelect = !this.shoppingCart[storeIndex].goodsList[goodsIndex].isBuySelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						if(!item.isBuySelect){
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isBuySelect = allIsSel
				}else{//编辑
					this.shoppingCart[storeIndex].goodsList[goodsIndex].isDelSelect = !this.shoppingCart[storeIndex].goodsList[goodsIndex].isDelSelect
					let allIsSel = true //是否已经全部选中
					this.shoppingCart[storeIndex].goodsList.forEach(item=>{
						if(!item.isDelSelect){
							allIsSel = false
						}
					})
					this.shoppingCart[storeIndex].isDelSelect = allIsSel
				}
			},
			//全选
			allSelBtn(){
				let toState = !this.allSelState
				if(!this.isEdit){//购物
					this.shoppingCart.forEach(sitem=>{
						sitem.isBuySelect = toState
						sitem.goodsList.forEach(gitem=>{
							gitem.isBuySelect = toState
						})
					})
				}else{//编辑
					this.shoppingCart.forEach(sitem=>{
						sitem.isDelSelect = toState
						sitem.goodsList.forEach(gitem=>{
							gitem.isDelSelect = toState
						})
					})
				}
			},
			//商品的数量增减
			countChange(id, event){
        let data = {
           id: id,
           number: event.value
        }
        editCartCount(data).then(res => {
          this.$emit("refresh")
        }).catch(err => {
          uni.showToast({
            icon: 'none',
            title: err
          })
        })
				//请求后台改变购物车商品的数量。。。storeIndex, goodsIndex
			},
			shanchu(){//删除
         console.log(this.shoppingCart)
        let ids = []
        let list = []
        for (let i = 0; i < this.shoppingCart.length; i++) {
          if(this.shoppingCart[i].isDelSelect){
             ids.push(this.shoppingCart[i].goodsList[0].id)
          }else{
            list.push(this.shoppingCart[i])
          }
        }

        if (ids.length == 0) {
          uni.showToast({
            title: '请选择要删除的数据',
            icon: 'none'
          })
          return
        }
        let that = this
				uni.showModal({
					title:'是否删除',
										success(res) {
											if(res.confirm){
                        cartRemove(ids).then(res => {
                          that.shoppingCart = list
                          uni.showToast({
                            icon: 'none',
                            title: '删除成功'
                          })
                          that.$emit("refresh")
                        })
												console.log("用户点击确定")
											}else{
												console.log("用户点去取消")
											}
										}
				})
			},
			jiesuan(){//结算
         let buySelect = []
        this.shoppingCart.forEach((item, index) => {
          if (item.isBuySelect) {
            item.goodsList.forEach(it => {
              buySelect.push(it)
            })
          }
        })
        if (buySelect.length == 0) {
          uni.showToast({
            icon: 'none',
            title: '请选择商品结算!'
          })
          return
        }
        this.$emit("refresh")
        uni.navigateTo({
          url:'../../subPackages/pages/shoppingmall/submit/submit?data=' + encodeURIComponent(JSON.stringify(buySelect))
        })
			}

		}
	}
</script>

<style lang="scss" scoped>
.navtop {
	    background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
	     overflow: hidden;
		 height: 150rpx;
		  }
 .status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
.navtitle {
	        text-align: center;
	        font-size: 32rpx;
	        color: #fff;
	        padding: 30rpx 0;
			height: 50rpx;
	    }
.icon{
		    position: absolute;
		   left: 20rpx;
		   top: 85rpx;
		}
.top-1{
     font-size: 32rpx;

	position: fixed;
	left: 10%;
	top: 80rpx;
}

	//选择按钮的样式
.w-90{
		width: 90rpx;
	}
.sel-btn{
		width: 45rpx;
		height: 45rpx;
	}
.no-select{
		width: 39rpx;
		height: 39rpx;
		border-radius: 50%;
		border: 1px solid #808080;
	}
	//中间部分
.box{
	width: 100%;
	height: 100rpx;
	background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
	}
.main{
	width: 100%;
	background-color: #FFFFFF;
	margin: -100rpx 0 0 0;
	border-radius: 30pt  30pt   0pt  0pt;
}
.section{//一个个店铺
	width: 100%;

}
.section_1{//一个个产品
	width:100%;
	height:260rpx;
	margin: 50rpx 0 0 0;

}
.box-1{
	width: 6%;
	height: 100rpx;

	margin: 100rpx 0 0 10rpx;
}
.box-2 {
	width: 260rpx;
	height: 260rpx;
	border-radius: 20rpx;
	margin: 0rpx 0 0 10rpx;
}
.box-3{
	width: 52%;
	height: 240rpx;
	margin: 10rpx 0 0 10rpx;

}
.box-31{
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;

}
.box-32{
	width: 100%;
	height: 35rpx;
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	margin: 10rpx 0 0 0;
	color:#8F939C;
  overflow: hidden;
}
.box-33{
	width: 60rpx;
	height: 20rpx;
	color: red;
	font-size: 34rpx;
	margin: 40rpx 0 0 0;
}
.box-34{
	margin: 40rpx 0 0 100rpx;
}
	//底部
.bottom{
    padding-bottom: 250rpx;
	width: 100%;
	height: 100rpx;
	position: fixed;
	background-color: #FFFFFF;
	bottom:-1rpx;
	left: 0;
}
.group-1{
	width: 30%;
	height: 100rpx;
	line-height: 100rpx;
	margin: 0 0 0 20rpx;

}
.group-11{
	margin: 35rpx 0 0 20rpx;

}
.text-1{
	color: #666666;
	font-size: 34rpx;
	margin: 0 0 0 10rpx;
}
.group-2{
	width: 45%;
	height: 100rpx;
	line-height: 100rpx;
	margin: 0 0 0 100rpx;

}
.group-21{
	width: 200rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #666666;

}
.text-2{
	color: #FF0000;
}
.group-22{
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: 10rpx 0 0 0;
	font-size: 34rpx;
}

</style>
